{% extends "base.html" %}
{% block title %}安全管理 - {{ app_name }}{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">
    <!-- 页面标题 -->
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-800 mb-2">安全管理</h1>
        <p class="text-gray-600">监控系统安全状态，管理安全策略和威胁检测</p>
    </div>

    <!-- 安全状态概览 -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
        <div class="bg-white rounded-lg shadow-md p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600">系统状态</p>
                    <p class="text-2xl font-bold text-green-600">安全</p>
                </div>
                <div class="bg-green-100 p-3 rounded-full">
                    <i class="fas fa-shield-alt text-green-600"></i>
                </div>
            </div>
        </div>
        
        <div class="bg-white rounded-lg shadow-md p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600">今日事件</p>
                    <p class="text-2xl font-bold text-blue-600" id="today-events">0</p>
                </div>
                <div class="bg-blue-100 p-3 rounded-full">
                    <i class="fas fa-exclamation-triangle text-blue-600"></i>
                </div>
            </div>
        </div>
        
        <div class="bg-white rounded-lg shadow-md p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600">封锁IP</p>
                    <p class="text-2xl font-bold text-red-600" id="blocked-ips">0</p>
                </div>
                <div class="bg-red-100 p-3 rounded-full">
                    <i class="fas fa-ban text-red-600"></i>
                </div>
            </div>
        </div>
        
        <div class="bg-white rounded-lg shadow-md p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600">失败登录</p>
                    <p class="text-2xl font-bold text-orange-600" id="failed-logins">0</p>
                </div>
                <div class="bg-orange-100 p-3 rounded-full">
                    <i class="fas fa-user-times text-orange-600"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- 实时威胁监控 -->
    <div class="bg-white rounded-lg shadow-md p-6 mb-8">
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-xl font-bold text-gray-800">实时威胁监控</h2>
            <button onclick="refreshThreatMonitor()" class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600">
                <i class="fas fa-sync-alt mr-2"></i>刷新
            </button>
        </div>
        
        <div id="threat-monitor" class="space-y-4">
            <!-- 威胁监控内容将在这里动态加载 -->
            <div class="text-center text-gray-500 py-8">
                <i class="fas fa-shield-alt text-4xl mb-4"></i>
                <p>正在加载威胁监控数据...</p>
            </div>
        </div>
    </div>

    <!-- 安全事件列表 -->
    <div class="bg-white rounded-lg shadow-md p-6 mb-8">
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-xl font-bold text-gray-800">安全事件</h2>
            <div class="flex space-x-2">
                <select id="event-type-filter" class="border rounded-md px-3 py-2">
                    <option value="">所有类型</option>
                    <option value="login_success">登录成功</option>
                    <option value="login_failure">登录失败</option>
                    <option value="api_access">API访问</option>
                    <option value="suspicious_request">可疑请求</option>
                    <option value="rate_limit_exceeded">限流触发</option>
                </select>
                <select id="threat-level-filter" class="border rounded-md px-3 py-2">
                    <option value="">所有级别</option>
                    <option value="low">低</option>
                    <option value="medium">中</option>
                    <option value="high">高</option>
                    <option value="critical">严重</option>
                </select>
                <button onclick="filterSecurityEvents()" class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600">
                    <i class="fas fa-filter mr-2"></i>筛选
                </button>
            </div>
        </div>
        
        <div class="overflow-x-auto">
            <table class="min-w-full table-auto">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">时间</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">事件类型</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">用户</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">IP地址</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">端点</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">威胁级别</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                    </tr>
                </thead>
                <tbody id="security-events-tbody" class="bg-white divide-y divide-gray-200">
                    <!-- 安全事件将在这里动态加载 -->
                </tbody>
            </table>
        </div>
        
        <!-- 分页 -->
        <div id="security-events-pagination" class="mt-4 flex justify-center">
            <!-- 分页控件将在这里动态加载 -->
        </div>
    </div>

    <!-- IP封锁管理 -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <!-- 封锁IP列表 -->
        <div class="bg-white rounded-lg shadow-md p-6">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-xl font-bold text-gray-800">IP封锁列表</h2>
                <button onclick="refreshBlockedIPs()" class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600">
                    <i class="fas fa-sync-alt mr-2"></i>刷新
                </button>
            </div>
            
            <div id="blocked-ips-list" class="space-y-2">
                <!-- 封锁IP列表将在这里动态加载 -->
                <div class="text-center text-gray-500 py-8">
                    <i class="fas fa-ban text-4xl mb-4"></i>
                    <p>正在加载封锁IP列表...</p>
                </div>
            </div>
        </div>

        <!-- 添加IP封锁 -->
        <div class="bg-white rounded-lg shadow-md p-6">
            <h2 class="text-xl font-bold text-gray-800 mb-4">添加IP封锁</h2>
            
            <form id="block-ip-form" class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">IP地址</label>
                    <input type="text" id="block-ip-address" class="w-full border rounded-md px-3 py-2" 
                           placeholder="例如: 192.168.1.100" required>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">封锁原因</label>
                    <select id="block-ip-reason" class="w-full border rounded-md px-3 py-2" required>
                        <option value="">选择原因</option>
                        <option value="failed_login_attempts">多次失败登录</option>
                        <option value="suspicious_activity">可疑活动</option>
                        <option value="rate_limit_abuse">限流滥用</option>
                        <option value="malicious_request">恶意请求</option>
                        <option value="other">其他</option>
                    </select>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">封锁时长</label>
                    <select id="block-ip-duration" class="w-full border rounded-md px-3 py-2">
                        <option value="1">1小时</option>
                        <option value="6">6小时</option>
                        <option value="24" selected>24小时</option>
                        <option value="72">3天</option>
                        <option value="168">7天</option>
                    </select>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">备注</label>
                    <textarea id="block-ip-notes" class="w-full border rounded-md px-3 py-2" rows="3"
                              placeholder="可选的备注信息"></textarea>
                </div>
                
                <button type="submit" class="w-full bg-red-500 text-white py-2 rounded-md hover:bg-red-600">
                    <i class="fas fa-ban mr-2"></i>封锁IP地址
                </button>
            </form>
        </div>
    </div>

    <!-- 限流配置 -->
    <div class="bg-white rounded-lg shadow-md p-6 mt-8">
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-xl font-bold text-gray-800">限流配置</h2>
            <button onclick="refreshRateLimits()" class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600">
                <i class="fas fa-sync-alt mr-2"></i>刷新
            </button>
        </div>
        
        <div id="rate-limits-config" class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <!-- 限流配置将在这里动态加载 -->
            <div class="text-center text-gray-500 py-8 md:col-span-2">
                <i class="fas fa-tachometer-alt text-4xl mb-4"></i>
                <p>正在加载限流配置...</p>
            </div>
        </div>
    </div>
</div>

<!-- IP封锁确认模态框 -->
<div id="block-ip-confirm-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden items-center justify-center">
    <div class="bg-white rounded-lg p-6 m-4 max-w-md w-full">
        <h3 class="text-lg font-bold text-gray-900 mb-4">确认封锁IP</h3>
        <p id="block-ip-confirm-message" class="text-gray-600 mb-6"></p>
        <div class="flex justify-end space-x-3">
            <button onclick="hideBlockIPConfirmModal()" class="px-4 py-2 text-gray-600 hover:text-gray-800">
                取消
            </button>
            <button onclick="confirmBlockIP()" class="px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600">
                确认封锁
            </button>
        </div>
    </div>
</div>

<!-- 解除封锁确认模态框 -->
<div id="unblock-ip-confirm-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden items-center justify-center">
    <div class="bg-white rounded-lg p-6 m-4 max-w-md w-full">
        <h3 class="text-lg font-bold text-gray-900 mb-4">确认解除封锁</h3>
        <p id="unblock-ip-confirm-message" class="text-gray-600 mb-6"></p>
        <div class="flex justify-end space-x-3">
            <button onclick="hideUnblockIPConfirmModal()" class="px-4 py-2 text-gray-600 hover:text-gray-800">
                取消
            </button>
            <button onclick="confirmUnblockIP()" class="px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-600">
                确认解除
            </button>
        </div>
    </div>
</div>

<script src="/static/js/security.js"></script>
{% endblock %}